<template>
	<view>
		<pickers @address="address" @close="close" :defaultAddress="defaultAddress">
			<view @click="xz">
				<text :class="`${xzshow?'jtou-class':'jtou-class-xz'}`"></text>
				<view class="address-class">{{addressName==""?'选择地址':addressName}}</view>
			</view>
		</pickers>
		<view class="cu-form-group" style=" font-size: 8px;">
			<view class="title">手机号码</view>
			<input type="number" v-model="adPhone" placeholder="输入框带标签" name="input"></input>
			<view class="cu-capsule radius">
				<view class='cu-tag bg-blue '>
					+86
				</view>
				<view class="cu-tag line-blue">
					中国大陆
				</view>
			</view>
		</view>

		<view class="cu-form-group">
			<view class="title">详细地址</view>
			<input placeholder="详细地址" v-model="adAddress" name="input"></input>
		</view>
		<view class="add-class" v-if="!show" @click="addAddress">
		</view>

	</view>
</template>

<script>
	import pickers from "@/components/ming-picker/ming-picker.vue"
	export default {
		data() {
			return {
				adPhone: "",
				adAddress: "",
				addressName: "",
				as: [],
				xzshow: true,
				//默认选中
				defaultAddress: [],
				//选中后的显示值
				res: "",
				url: this.$url + "/frontend",
				urId: sessionStorage.getItem("urId")
			}
		},
		methods: {
			exitIf(data) {
				if (data != "") return true
				return false
			},
			//添加地址
			addAddress() {

				if (this.adPhone.length == 11 && this.exitIf(this.adPhone) == this.exitIf(this.addressName) && this.as
					.length != 0) {
					var data = {
						adPhone: this.adPhone,
						adAddress: this.adAddress,
						adProvince: this.as[0],
						adCity: this.as[1],
						adUrId: this.urId
					}
					uni.request({
						url: `${this.url}/address/save`,
						method: "POST",
						data,
						success: ({
							data
						}) => {
							if (data.code == 200) {
								uni.navigateTo({
									url: '../set-address/set-address'
								})
							}
						}

					})
				} else {
					uni.showToast({
						icon: "error",
						title: '地址信息不合法',
						duration: 2000
					});
				}

			},
			xz() {
				this.xzshow = false
			},
			address(e) {
				//console.log(e.value)
				this.as = e.value
				this.addressName = e.value[0] + e.value[1] + e.value[2]
			},
			close() {
				console.log("点击了取消")
				this.xzshow = true
			}
		},
		components: {
			pickers
		}
	}
</script>

<style>
	.add-class {
		position: fixed;
		bottom: 10%;
		right: 10%;
		width: 35px;
		height: 35px;
		background-size: 100%;
		background-image: url(../../static/address.png);

	}

	input::-webkit-input-placeholder {
		//webkit内核
		color: #D6D0CA;
		font-size: 8px;
	}

	.jtou-class-xz {
		top: 50%;
		width: 8px;
		height: 8px;
		position: absolute;
		border-left: 1px solid #999;
		border-bottom: 1px solid #999;
		/* -webkit-transform: translate(0, -50%) rotate(-135deg); */
		transform: translate(50%, -50%) rotate(-45deg);
		transition: width 0.5s, height 0.5s, transform 0.5s;
		-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s;
	}

	.jtou-class {
		top: 50%;
		width: 8px;
		height: 8px;
		position: absolute;
		border-left: 1px solid #999;
		border-bottom: 1px solid #999;
		-webkit-transform: translate(0, -50%) rotate(-135deg);
		transform: translate(0, -50%) rotate(-135deg);
		transition: width 0.5s, height 0.5s, transform 0.5s;
		-webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s;
	}

	.address-class {
		width: 100%;
		line-height: 38px;
		border-top: 1px solid #f1f1f1;
		height: 38px;
		font-size: 13px;
		background-color: #FFFFFF;
		text-align: center;
		color: #808080;
	}
</style>
